<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生弹框</title>
		<script src="../../../node_modules/layui/dist/layui.js"></script>
		<script src="../../../node_modules/mockjs/dist/mock.js"></script>
		<link rel="stylesheet" type="text/css" href="../../../node_modules/layui/dist/css/layui.css" />
		<link rel="stylesheet/less" type="text/css" href="../../../src/css/style.less" />
		<script src="../../../src/css/less.min.js"></script>
		<script src="../../baseUrl.js"></script>
	</head>
	<body>
		<form class="layui-form layui-form-pane" action="" lay-filter="example">
			<div class="layui-form-item">
				<label class="layui-form-label">输入框</label>
				<div class="layui-input-block">
					<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码框</label>
				<div class="layui-input-block">
					<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">选择框</label>
				<div class="layui-input-block">
					<select name="interest" lay-filter="aihao">
						<option value=""></option>
						<option value="0">写作</option>
						<option value="1">阅读</option>
						<option value="2">游戏</option>
						<option value="3">音乐</option>
						<option value="4">旅行</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">复选框</label>
				<div class="layui-input-block">
					<input type="checkbox" name="like[write]" title="写作">
					<input type="checkbox" name="like[read]" title="阅读">
					<input type="checkbox" name="like[daze]" title="发呆">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">开关</label>
				<div class="layui-input-block">
					<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">单选框</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男" checked="">
					<input type="radio" name="sex" value="女" title="女">
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">文本域</label>
				<div class="layui-input-block">
					<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
					<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
					<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
				</div>
			</div>
		</form>





		<script type="text/javascript">
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate;

				//日期
				laydate.render({
					elem: '#date'
				});
				laydate.render({
					elem: '#date1'
				});

				//创建一个编辑器
				var editIndex = layedit.build('LAY_demo_editor');

				//自定义验证规则
				form.verify({
					title: function(value) {
						if (value.length < 5) {
							return '标题至少得5个字符啊';
						}
					},
					pass: [
						/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
					],
					content: function(value) {
						layedit.sync(editIndex);
					}
				});

				//监听指定开关
				form.on('switch(switchTest)', function(data) {
					layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
						offset: '6px'
					});
					layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
				});

				//监听提交
				form.on('submit(demo1)', function(data) {
					layer.alert(JSON.stringify(data.field), {
						title: '最终的提交信息'
					})
					return false;
				});

				//表单赋值
				layui.$('#LAY-component-form-setval').on('click', function() {
					form.val('example', {
						"username": "贤心" // "name": "value"
							,
						"password": "123456",
						"interest": 1,
						"like[write]": true //复选框选中状态
							,
						"close": true //开关状态
							,
						"sex": "女",
						"desc": "我爱 layui"
					});
				});
				//表单取值
				layui.$('#LAY-component-form-getval').on('click', function() {
					var data = form.val('example');
					alert(JSON.stringify(data));
				});
			});
		</script>

	</body>
</html>
